<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.2.3.min.js"></script>
    <script src="bootstrap.js"></script>
    <link rel = "stylesheet" href="bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
  <div class="single">
    <div class="container">
        <div class="single-page">
            <div class="flexslider details-lft-inf">
                <ul class="slides">
                    <li data-thumb="images/s1.jpg">
                        <img src="public/images/s1.jpg" />
                    </li>
                    <li data-thumb="images/s2.jpg">
                        <img src="public/images/s2.jpg" />
                    </li>
                    <li data-thumb="images/s3.jpg">
                        <img src="public/images/s3.jpg" />
                    </li>
                    <li data-thumb="images/s4.jpg">
                        <img src="public/images/s4.jpg" />
                    </li>
                </ul>
            </div>
            <!-- FlexSlider -->
            <script defer src="jquery.flexslider.js"></script>
            <link rel="stylesheet" href="flexslider.css" type="text/css" media="screen" />

            <script>
                // Can also be used with $(document).ready()
                $(window).load(function() {
                    $('.flexslider').flexslider({
                        animation: "slide",
                        controlNav: "thumbnails"
                    });
                });
            </script>
        </div>
    </div>
</div>
</body>
</html>